<template>
  <div id="taxDeclare">
    <div class="header">
      <div class="month">
        <span>税款所属期:</span>
        <el-date-picker v-model="query.month" type="month" :clearable="false" :editable="false" placeholder="选择月"> </el-date-picker>
      </div>
      <div class="Query">
        <div class="left">
          <el-form class="form">
            <el-form-item>
              <el-input v-model="query.keyWord" placeholder="姓名/工号/身份证号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.project" placeholder="请选择所属项目">
                <el-option value="工资薪金申报">工资薪金申报</el-option>
                <el-option value="全年一次性奖金收入">全年一次性奖金收入</el-option>
                <el-option value="劳务报酬（一般、法律援助补贴、其他非连续劳务）">劳务报酬（一般、法律援助补贴、其他非连续劳务）</el-option>
                <el-option value="劳务报酬（保险营销员、证券经纪人、其他连续劳务）">劳务报酬（保险营销员、证券经纪人、其他连续劳务）</el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.status">
                <el-option value="全部">全部</el-option>
                <el-option value="待报送">待报送</el-option>
                <el-option value="待反馈">待反馈</el-option>
                <el-option value="报送成功">报送成功</el-option>
                <el-option value="报送失败">报送失败</el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-popover placement="bottom" width="600" trigger="click">
            <el-form class="form">
              <el-form-item>
                <el-select v-model="query.type" placeholder="请选择所属大类">
                  <el-option value="综合所得申报">综合所得申报</el-option>
                  <el-option value="非居民所得申报">非居民所得申报</el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="query.taxOffice" placeholder="主管税务局"></el-input>
              </el-form-item>
              <el-form-item>
                <el-date-picker v-model="query.declareDate" type="datetime" placeholder="选择申报时间"></el-date-picker>
              </el-form-item>
            </el-form>
            <el-button slot="reference">更多</el-button>
          </el-popover>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="right">
          <el-button type="primary" @click="addTaxBill">新增个税计算单据</el-button>
          <el-dropdown @command="handleCommand">
            <el-button type="primary"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">导入</el-dropdown-item>
              <el-dropdown-item command="2">导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="content">
      <el-table :data="rows" height="100%">
        <el-table-column label="序号" min-width="35">
          <template slot-scope="{ row }">
            <el-checkbox>{{ row.num }}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="公司名称" min-width="50"></el-table-column>
        <el-table-column prop="type" label="所得大类" min-width="50" />
        <el-table-column prop="project" label="所得项目" min-width="50" />
        <el-table-column prop="month" label="税款所属月" min-width="60" />
        <el-table-column prop="taxOffice" label="主管税务局" min-width="100" />
        <el-table-column prop="declareStatus" label="申报状态"></el-table-column>
        <el-table-column prop="errMessage" label="错误信息"></el-table-column>
        <el-table-column prop="payStatus" label="缴税状态"></el-table-column>
        <el-table-column prop="sheetPeople" label="工资表人数"></el-table-column>
        <el-table-column prop="taxDeclarePeople" label="个税申报人数"></el-table-column>
        <el-table-column prop="thisIncome" label="本期收入总额"></el-table-column>
        <el-table-column prop="refund" label="应补（退）税额"></el-table-column>
        <el-table-column prop="taxDate" label="最新计税时间"></el-table-column>
        <el-table-column label="操作">
          <template>
            <span class="declare">申报</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "taxDeclare",
  created() {
    var date = new Date();
    var month = date.getFullYear() + "-" + (date.getMonth() > 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1));
    this.query.month = month;
  },
  data() {
    return {
      query: { month: "", keyWord: "", company: "", status: "" },
      rows: [
        {
          num: 1,
          name: "徐彬",
          workNumber: "10156",
          date: "2022-09",
          idType: "身份证",
          idCard: "412828199905211547",
          children: "- -",
          continue: "- -",
          housing: "- -",
          support: "- -",
          lookAfter: "- -",
          status: "报送成功",
          companyname: "北京云代账",
          updateTime: "2022-09-17 14:32"
        }
      ]
    };
  },
  methods: {
    addTaxBill() {
      this.$router.push({ name: "addTaxBill" });
    }
  }
};
</script>

<style lang="less" scoped>
#taxDeclare {
  padding: 20px;
  .header {
    margin-top: 5px;
    .month {
      font-weight: 900;
      .el-date-editor {
        :deep(.el-input__inner) {
          border-bottom: 0 !important;
          font-size: 19px;
          font-weight: 600;
        }
      }
    }
    .Query {
      margin-top: 15px;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .form {
          display: inline-flex;
          .el-form-item {
            margin-right: 8px;
          }
        }
      }
    }
  }
  .content {
    .declare {
      color: #31a2f2;
      cursor: pointer;
    }
  }
}
.el-popover {
  .form {
    padding: 10px 50px 10px 20px;
    display: flex;
    .el-form-item {
      margin-right: 8px;
      margin-top: 18px;
    }
  }
}
</style>
